/*常用的样式小技巧记录*/

//点击时动态效果样式
@mixin dynamic($direction,$distance) {
  position: relative;
  &:link,&:visited{
    #{$direction}: 0;
  }
  &:active{
    #{$direction}: $distance;
  }
}

//很细的上、下边框
@mixin border-ab($or,$px,$color){
  &::after{
    content: "";
    position: absolute;
    left: 0;
    #{$or}: 0;
    width: 100%;
    height: $px;
    background-color:$color;
    transform: scaleY(0.5);
  }
}

//很细的左、右边框
@mixin border-lf($or,$px,$color){
  &::after{
    content: "";
    position: absolute;
    top: 0;
    #{$or}: 0;
    height: 100%;
    width: $px;
    background-color:$color;
    transform: scaleX(0.5);
  }
}

//按钮的简单样式
@mixin public-btn($bg,$color,$radius) {
  display: block;
  background-color: $bg;
  color:$color;
  border-radius: $radius;
  box-shadow: 0.2rem 0.2rem 0.2rem rgba($bg,0.5);
  border: none;
  text-align: center;
}

//蒙版
.public-mask{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(#666666,0.6);
  z-index: 99;
}

//文字单行显示，多出部分显示···
.single-row{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

//清除浮动
.clear-float{
  overflow: hidden;
  *zoom : 1;

  &::after{
    display: block;
    content: " ";
    clear: both;
    height: 0;
    visibility: hidden;
  }
}

//flex横向布局
.flex-row{
  display: flex;
  flex-direction: row;

  > .flex1{ //宽度自适应，需要其他元素有固定宽度
      flex: 1;
      width: 0;
  }
}

//纵向布局
.flex-column{
  display: flex;
  flex-direction: column;

  > .flex1{ //高度自适应，需要其他元素有固定高度
      flex: 1;
      height: 0;
  }
}

// 对齐列表
.justify-list-wrapper{
  padding: $gap / 2 0;
  text-align: justify;

  .justify-list-item{
      display: inline-block;
      padding: $gap / 2 $gap $gap / 2 0;
      vertical-align: top;

      &.limit-width {
          width: 230px;  
      }
  }
}
